// 房源管理
import { Select, Radio } from 'antd';
import { Form, Input, InputNumber, Popconfirm, Table, Typography, Switch } from 'antd';
import React, { useState, useEffect, useRef } from 'react';
import axios from "axios"
import { useNavigate } from "react-router-dom"


const originData = [];
for (let i = 0; i < 100; i++) {
    originData.push({
        key: i.toString(),
        name: `Edrward ${i}`,
        age: 32,
        address: `London Park no. ${i}`,
    });
}
const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
}) => {
    const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;
    return (
        <td {...restProps}>
            {editing ? (
                <Form.Item
                    name={dataIndex}
                    style={{
                        margin: 0,
                    }}
                    rules={[
                        {
                            required: true,
                            message: `Please Input ${title}!`,
                        },
                    ]}
                >
                    {inputNode}
                </Form.Item>
            ) : (
                children
            )}
        </td>
    );
};



// rowSelection object indicates the need for row selection
const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
        console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record) => ({
        disabled: record.name === 'Disabled User',
        // Column configuration not to be checked
        name: record.name,
    }),
};

function PropertyManagement(props) {

    const [form] = Form.useForm();
    const [data, setData] = useState(originData);
    const [editingKey, setEditingKey] = useState('');
    const isEditing = (record) => record.key === editingKey;
    const [selectionType, setSelectionType] = useState('checkbox');
    //模糊搜索
    const keywords = useRef(null)


    //表格数据渲染
    const nav = useNavigate()
    useEffect(() => {
        axios.get("/api/houseslist").then(res => {
            setData(res.list)
        }).catch(err => {
            console.log(err);
        })
    }, [])


    const onChange = (checked) => {
        console.log(`switch to ${checked}`);
    };



    //区域按钮切换
    const handleChange = (value) => {
        console.log(value);
        // 浅拷贝数据
        const items = [...data]
        // 判断 当下拉框的选项不是-请选择-的时候
        if (value !== '-请选择-') {
            // 遍历items就是所有存在的数据 进行filter筛选过滤
            const count = items.filter((item, index) => {
                // 返回的是数据中的城市属性中包含 当前选中城市的数据
                return item.city.includes(value)
            })
            // 然后将过滤出来的新数据重新赋值给data 将数据实时渲染到页面上
            setData(count)
        } else {
            // 当下拉框的选项是-请选择-的时候，代表选中的是全部的数据，然后重新请求接口数据 重新给data赋值
            axios.get("/api/houseslist").then(res => {
                setData(res.list)
            })
        }
    };


    //状态按钮切换
    const handleChangetwo = (value) => {
        console.log(`selected ${value}`);
        // 浅拷贝数据
        const items = [...data]
        // 判断 当下拉框的选项是-所有-的时候
        if (value === '-所有-') {
            // 代表选中的是全部的数据，然后重新请求接口数据 重新给data赋值
            axios.get("/api/houseslist").then(res => {
                setData(res.list)
            })
        } //判断  当下拉框选项是启用的时候
        else if (value === '启用') {
            // 遍历items就是所有存在的数据 进行filter筛选过滤
            const count = items.filter((item, index) => {
                // 返回的是数据中状态值为1的所有数据
                return item.status = '1'
            })
            // 然后将过滤出来的新数据重新赋值给data 将数据实时渲染到页面上
            setData(count)
        } //判断  当下拉框选项是禁用的时候
        else if (value === '禁用') {
            // 遍历items就是所有存在的数据 进行filter筛选过滤
            const count = items.filter((item, index) => {
                // 返回的是数据中状态值为0的所有数据
                return item.status = '0'
            })
            // 然后将过滤出来的新数据重新赋值给data 将数据实时渲染到页面上
            setData(count)
        }
    };



    //点击编辑按钮跳转编辑页面
    const edit = () => {
        nav('/home/propertiesforsale/groupbuyingmanagement/addgroupbuying')
    }

    //单个删除
    const del = (record) => {
        // 浅拷贝数据
        const items = [...data]
        // 遍历所有数据
        items.forEach((item, index) => {
            // 判断传过来的key 和 数据中的key 相同时
            if (item.key === record.key) {
                // 从对应下标处删除当前数据
                items.splice(index, 1)
            }
        })
        // 操作之后数据从新赋值给data进行页面渲染
        setData(items)
    };



    //全部删除
    const alldel = () => {
        // 浅拷贝
        const items = [...data]
        // 遍历所有数据  有数据存在时，就将它从当前下标删除
        items.forEach((item, index) => {
            if (item) {
                items.splice(index)
            }
        })
        // 将数据重新赋值给data 渲染到页面
        setData(items)
    };


    // 点击搜索按钮搜索
    const search = () => {
        // 获取绑定的输入框的value值，赋值给定义的变量vlaue
        const value = keywords.current.value
        // 浅拷贝
        const items = [...data]
        // 判断如果输入框的长度大于0 ，就是输入框内有值的时候
        if (value.length > 0) {
            // 遍历所有数据  进行筛选过滤
            const count = items.filter((item, index) => {
                // 返回的是 数据中的楼盘名称包含 输入框的值的所有数据
                return item.name.includes(value)
            })
            // 将筛选出的数据重新赋值给data 渲染到页面
            setData(count)
        } else {//当输入框内容为空时，重新请求数据接口  将所有数据重新赋值给data  重新渲染所有数据
            axios.get("/api/houseslist").then(res => {
                setData(res.list)
            })
        }
    }



    const cancel = () => {
        setEditingKey('');
    };

    const save = async (key) => {
        try {
            const row = await form.validateFields();
            const newData = [...data];
            const index = newData.findIndex((item) => key === item.key);
            if (index > -1) {
                const item = newData[index];
                newData.splice(index, 1, {
                    ...item,
                    ...row,
                });
                setData(newData);
                setEditingKey('');
            } else {
                newData.push(row);
                setData(newData);
                setEditingKey('');
            }
        } catch (errInfo) {
            console.log('Validate Failed:', errInfo);
        }
    };

    //表格数据渲染
    const columns = [
        {
            title: 'ID',
            dataIndex: 'key',
            width: '5%',
            editable: true,
        },
        {
            title: '小区名称',
            dataIndex: 'name',
            width: '15%',
            editable: true,
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: '25%',
            editable: true,
        },
        {
            title: '面积',
            dataIndex: 'price',
            width: '5%',
            editable: true,
        },
        {
            title: '月租',
            dataIndex: 'price',
            width: '5%',
            editable: true,
        },
        //排序 
        {
            title: '排序',
            dataIndex: 'number',
            width: '8%',
            editable: true,
            sorter: (a, b) => {
                return a.number - b.number;
            },
        },
        //状态切换
        {
            title: '状态',
            key: 'status',
            width: '10%',
            editable: true,
            render: (_, record) => (
                // Switch 状态切换   '#5FB878' : '#ccc'
                <Switch defaultChecked onChange={onChange} style={{ background: record.status === '1' ? '#5FB878' : '#ccc' }} />
            ),
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) => {
                const editable = isEditing(record);
                return editable ? (
                    <span>
                        <Typography.Link
                            onClick={() => save(record.key)}
                            style={{
                                marginRight: 8,
                            }}
                        >
                            Save
                        </Typography.Link>
                        <Popconfirm title="Sure to cancel?" onConfirm={cancel}>
                            <a>Cancel</a>
                        </Popconfirm>
                    </span>
                ) : (
                    // 编辑按钮 删除按钮
                    <>
                        <Typography.Link disabled={editingKey !== ''} onClick={edit}>
                            <button style={{ background: '#30A89D', color: '#fff', border: "none", width: '70px', height: '20px' }}>成交记录</button>
                        </Typography.Link>&emsp;

                        <Typography.Link disabled={editingKey !== ''} onClick={edit}>
                            <button style={{ background: '#30A89D', color: '#fff', border: "none", width: '40px', height: '20px' }}>编辑</button>
                        </Typography.Link>&emsp;

                        <Typography.Link disabled={editingKey !== ''} onClick={() => del(record)}>
                            <button style={{ background: '#FF5722', color: '#fff', border: "none", width: '40px', height: '20px' }}>删除</button>
                        </Typography.Link>
                    </>

                );
            },
        },
    ];
    const mergedColumns = columns.map((col) => {
        if (!col.editable) {
            return col;
        }
        return {
            ...col,
            onCell: (record) => ({
                record,
                inputType: col.dataIndex === 'age' ? 'number' : 'text',
                dataIndex: col.dataIndex,
                title: col.title,
                editing: isEditing(record),
            }),
        };
    });
    return (
        <div style={{ width: '100%', height: '100%' }}>
            {/* 头部筛选按钮 */}
            <div style={{ position: 'relative' }}>

                <div style={{ margin: '50px 0', display: 'flex' }}>

                    {/* 状态按钮 所有 启用 禁用*/}
                    <div className='box2'>
                        <span style={{ marginRight: '20px', marginLeft: '30px' }}>状态</span>
                        <Select
                            defaultValue="-所有-"
                            style={{
                                width: 120,
                            }}
                            onChange={handleChangetwo}
                            options={[
                                { value: '-所有-', label: '-所有-' },
                                { value: '启用', label: '启用' },
                                { value: '禁用', label: '禁用' }
                            ]}
                        />

                    </div>

                    {/* 关键词 模糊按钮 */}
                    <div className='box3'>
                        <span style={{ marginLeft: '20px' }}>关键词</span>
                        <input type="text" placeholder='输入关键词搜索' ref={keywords} style={{ width: '250px', height: '35px', borderRadius: '5px', outline: 'none', borderColor: '#ccc', border: '1px solid #ccc', marginLeft: '20px' }} />
                        <button
                            onClick={search}
                            style={{ background: '#1E9FFF', fontSize: '15px', color: '#fff', border: 'none', width: '80px', height: '40px', borderRadius: '5px', marginLeft: '5px' }}>搜索</button>
                        <span style={{ color: "green", marginLeft: '5px', fontSize: '15px' }}>排序数字越小越靠前</span>
                    </div>

                </div>

            </div>

            {/* 表格*/}
            <div>
                <Table
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={data}
                />
            </div>

            {/* 全选按钮 */}
            <Radio defaultValue={1}>全选/取消</Radio>
            {/* 批量删除 */}
            <button onClick={alldel} style={{ background: '#FF5722', color: '#fff', border: "none", width: '40px', height: '20px' }}>删除</button>

        </div>
    )
}

export default PropertyManagement